<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '卡项详情',
			size: '40%',
			appendToBody: true
		}"
	>
		<el-card
			shadow="never"
			class="mb-2 card"
			:class="{
				discount: info.sc_type == 2,
				period: info.sc_type == 3,
				course: info.sc_type == 5,
				'course-all': info.sc_type == 4,
				stored_value: info.sc_type == 1,
				grayscale: [0, 2].includes(info.status)
			}"
		>
			<div slot="header" class="card__head">
				{{ info.card_name }}
				<span
					class="tag plain white ml-1"
					style="background: rgba(0, 0, 0, 0.3); border: none; font-size: 10px"
				>
					{{ info.sc_type_dec }}
				</span>
			</div>
			<div>
				<el-row :gutter="10" class="card__info">
					<el-col :span="6" v-if="info.sc_type == 1">
						<div class="label">卡内余额</div>
						<div class="value">￥{{ info.card_balance || 0 }}</div>
					</el-col>
					<el-col :span="6" v-else-if="info.sc_type == 2">
						<div class="label">卡内折扣</div>
						<div class="value">{{ info.discount }}折</div>
					</el-col>
					<el-col :span="6" v-else-if="info.sc_type == 3">
						<div class="label">卡内时段</div>
						<div class="value">
							{{ info.content_data.mount }}
						</div>
					</el-col>
					<el-col :span="6" v-else-if="info.sc_type == 4">
						<div class="label">卡内余次</div>
						<div class="value">{{ parseInt(info.card_balance || 0) }}次</div>
					</el-col>
					<el-col :span="6" v-else>
						<div class="label">卡内余次</div>
						<div class="value">{{ info.content_data.mount || 0 }}次</div>
					</el-col>
					<el-col :span="6">
						<div class="label">购买价格</div>
						<div class="value">￥{{ info.real_price || 0 }}</div>
					</el-col>
					<el-col :span="6">
						<div class="label">购买时间</div>
						<div class="value">
							{{ info.addtime | dateFormat }}
						</div>
					</el-col>
					<el-col :span="6">
						<div class="label">有效期至</div>
						<div class="value">
							{{ info.etime }}
						</div>
					</el-col>
				</el-row>
				<!-- <el-divider /> -->
				<!-- <el-row type="flex" justify="space-between" align="middle">
					<div class="validity-timer">
						<span class="label">有效期至：</span>
						<span>{{ info.etime }}</span>
					</div>
				</el-row> -->
			</div>
		</el-card>
		<el-card shadow="never" class="mt-2" body-style="padding:0">
			<cl-tabs-card style="margin: -2px -1px 0" v-model="activeTab" :tabs="tabs" />
			<div class="pa-1">
				<cl-crud>
					<transition name="fade-transform" mode="out-in">
						<keep-alive>
							<zm-table
								v-if="activeTab == 'card'"
								key="card"
								:columns="cardColumns"
								:data="info.serviceList || []"
								:auth-height="false"
							>
								<cl-empty slot="empty" />
							</zm-table>
							<zm-table
								v-if="activeTab == 'consume'"
								key="consume"
								:columns="consumeColumns"
								:data="consumeList"
								:auth-height="false"
							>
								<cl-empty slot="empty" />
							</zm-table>
							<el-timeline v-if="activeTab == 'log'" key="log">
								<template v-if="logList.length">
									<el-timeline-item
										v-for="(item, idx) in logList"
										:key="idx"
										:timestamp="item.addtime"
										placement="top"
									>
										<el-card shadow="never" class="log-item">
											<div slot="header" class="flex">
												<cl-customer :name="item.id_op_name" />
											</div>
											<div class="ellipsis3 plr-1 ptb-1">
												{{ item.content }}
											</div>
										</el-card>
									</el-timeline-item>
								</template>
								<cl-empty v-else />
							</el-timeline>
						</keep-alive>
					</transition>
				</cl-crud>
			</div>
		</el-card>
		<card-form ref="form" :info="info" @confirm="confirmForm" />
		<template slot="footer" v-if="info.status == 1 || info.status == 2">
			<el-button
				size="small"
				type="info"
				plain
				@click="invalid"
				:loading="invalidLoading"
				v-auth="'store_cusdetail_card_invalid'"
			>
				失效
			</el-button>
			<!-- <el-button
				size="small"
				type="primary"
				plain
				@click="edit"
				v-if="info.sc_type != 3"
				v-auth="'store_cusdetailindex_editcard'"
			>
				修改
			</el-button> -->
			<el-button
				size="small"
				type="primary"
				v-if="info.sc_type == 3 ||( info.sc_type == 4 && info.card_balance > 0)"
				v-auth="'store_cusdetail_card_adjourn'"
				@click="adjourn"
			>
				延期
			</el-button>
		</template>
	</cl-drawer>
</template>
<script>
import CardForm from "./card-form";
export default {
	inject: ["getCardList"],
	components: {
		CardForm
	},
	data() {
		return {
			activeTab: "card",
			tabs: [
				{ label: "卡项详情", name: "card", disabled: false },
				{ label: "消费记录", name: "consume" },
				{ label: "操作记录", name: "log" }
			],
			info: {
				content_data: {},
				serviceList: []
			},
			loading: false,
			invalidLoading: false,
			cardColumns: [
				{ label: "适用服务", prop: "name", minWidth: 200 },
				{ label: "次数/金额", prop: "total", minWidth: 100 }
			],
			consumeColumns: [
				{ label: "时间", prop: "addtime", minWidth: 130 },
				{ label: "内容", prop: "prod_name", minWidth: 200 },
				{ label: "操作人", prop: "add_user_name", minWidth: 100 }
			],
			// 消费记录
			consumeList: [],
			// 日志记录
			logList: []
		};
	},
	methods: {
		open(data = {}) {
			this.info = data;
			this.tabs[0].disabled = data.sc_type == 1;
			this.activeTab = data.sc_type == 1 ? "consume" : "card";
			this.consumeList = [];
			this.logList = [];
			this.init();
			this.$refs.drawer.create();
		},
		init() {
			this.getDetail();
			this.getConsumeList();
			this.getLogList();
		},
		async getDetail() {
			const { cc_id, cus_id } = this.info;
			let query = {
				type: 1,
				cc_id,
				cus_id
			};
			this.loading = true;
			const data = await this.$service.servicecard.cardinfo(query).done(() => {
				this.loading = false;
			});
			const content_data = data.content_data || {};
			this.info = {
				...data,
				content_data,
				discount: content_data.discount / 10,
				serviceList: content_data?.list ?? []
			};
		},

		// 获取卡消费记录
		async getConsumeList() {
			const { cc_id, cus_id } = this.info;
			const data = await this.$service.servicecard.carduse({ sc_id: cc_id, cus_id });
			this.consumeList = data;
		},
		// 获取操作记录
		async getLogList() {
			const { cc_id, cus_id } = this.info;
			const data = await this.$service.servicecard.cardoplist({ sc_id: cc_id, cus_id });
			this.logList = data;
		},
		// 失效
		invalid() {
			this.confirm("确定失效, 是否继续?")
				.then(async () => {
					const { cc_id, cus_id } = this.info;
					this.invalidLoading = true;
					await this.$service.servicecard.cardinvalid({ cc_id, cus_id }).done(() => {
						this.invalidLoading = false;
					});
					this.$message.success("操作成功");
					this.getCardList();
					this.init();
				})
				.catch(() => {});
		},
		// 修改
		edit() {
			this.$refs.form.open();
		},
		// 延期
		adjourn() {
			this.$refs.form.open(true);
		},
		confirmForm() {
			this.getCardList();
			this.init();
		}
	}
};
</script>
<style lang="scss" scoped>
.card {
	border-radius: 8px !important;
	&.discount {
		// background-color: #35a69e;
		background: #156DFF;
		background-size: cover;
	}
	&.period {
		// background-color: #003a9d;
		background: #156DFF;
		background-size: cover;
	}
	&.course {
		// background-color: #018cf7;
		background: #156DFF;
		background-size: cover;
	}
	&.course-all {
		// background-color: #e98216;
		background: #156DFF;
		background-size: cover;
	}
	&.stored_value {
		background: #156DFF;
		background-size: cover;
	}
	::v-deep {
		.el-card__header {
			padding: 0;
			border-bottom: 0px !important;
		}
		.el-card__body {
			font-size: 12px;
			padding: 20px 15px;
		}
		.el-divider {
			background: #ebeef5;
			margin: 20px 0;
		}
	}
	&__head {
		padding: 10px 15px;
		color: #fff;
		// background-color: $primary;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		border-bottom: 0px !important;
	}
	&__info {
		text-align: center;
		.label {
			color: #fff;
			margin-bottom: 15px;
		}
		.value {
			color: #fff;
		}
	}
	.validity-timer {
		.label {
			color: #7f7f7f;
		}
	}
}
.log-item {
	::v-deep {
		.el-card__header {
			padding: 10px 20px;
		}
	}
}
</style>
